import React,{Component} from 'react'
import { Card, Table, Button, Popconfirm } from "antd";

export default class List extends Component{	
	render(props){
		const dataSource=[
		  {
			id: 1,
			name: "娃哈哈",
			price: 5
		  },
		  {
			id: 2,
			name: "特仑苏",
			price: 6
		  },
		  {
			id: 3,
			name: "卫龙",
			price: 4
		  }
	];
	const columns=[{
				title: "序号",
				key: "id",
				align: "center",
				render: (txt, record, index) => index + 1
			},{
			      title: "名字",
			      dataIndex: "name",
			},{
				title: "价格",
				dataIndex: "price"
			},{
				 title: "操作",
				 render: (txt, record, index) => {
				   return (
				     <div>
				       <Button
				         type="primary"
				         size="small"
				         onClick={() => {
				           // 跳转到edit页面，传递id作为参数
				           this.props.history.push(`/admin/products/edit/${record.id}`);
				         }}
				       >
				         修改
				       </Button>
				       <Popconfirm
				         title="确定删除此项？"
						 okText="确认"
						 cancelText="取消"
				         onCancel={() => console.log("用户取消删除")}
						 onConfirm={() => console.log("删除")}
				       >
				         <Button style={{ margin: "0 1rem" }} type="danger" size="small">
				           删除
				         </Button>
				       </Popconfirm>
				     </div>
				   );
				 }
			}];
		return(
			<Card
			  title="商品列表"
			  extra={
			    <Button
			      type="primary"
			      size="small"
			      onClick={() =>this.props.history.push("/admin/products/edit")}
			    >
			      新增
			    </Button>
			  }
			>
			  <Table
				rowKey="id"
			    columns={columns}
			    bordered
				dataSource={dataSource}
			  />
			</Card>
		)
	}
}